import React from "react";
import 'antd/dist/antd.css'
import {Button, Input ,List} from 'antd'


//无状态组件
function IndexUi(props){
    let {inputValue,inputChange,list,delItem,addList} = props
    console.log(props)
    return(
        <div>
                <div className="topInput" >
                    <Input value={inputValue} style={{width:'250px',marginRight:'10px',marginLeft:'10px'}} onChange={inputChange} />
                    <Button type="primary" onClick={addList}>增加</Button>
                </div>
                <div className="bottomInput" style={{width:'300px',marginLeft:'20px'}}>
                    <List bordered dataSource={list}  renderItem={(item,index)=>(
                            <List.Item>
                                <List.Item.Meta avatar={item} />
                                <Button type="primary" danger onClick={delItem.bind(this,index)}>删除</Button>
                            </List.Item>
                    )} />
                </div>
            </div>
    )
}

export default IndexUi;